<!-- 分页组件 -->

<template>
  <div ref="pageBox" class="pagination-container">
    <span class="operateBtnGroup" style="flex:1;height:26px;overflow:hidden;min-width:80px;">
      <span
        class="operateBtnItem"
        v-for="(item, index) in ButtonArr"
        :key="index"
        @click="pushButton(item.route)"
      >
        <span v-if="index !== 0" class="shu"></span>
        <img
          :src="$baseUrl + item.image"
        />
        <span class="text">{{ item.m_name }}</span>
      </span>
      <el-dropdown v-if="isMore" style="width: 80px;position: absolute;cursor: pointer;height: 28px;line-height: 29px;margin:0 10px;" @command="pushButton" trigger="click">
        <span class="el-dropdown-link">
          {{$t('PaginationLang.more_operations')}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :style="{marginTop:index==0?'0':'5px',padding:'0 10px'}" style="display:flex;align-items: center;gap: 5px;" v-for="(item, index) in ButtonArrHide" :key="index" :command="item.route">
            <img :src="$baseUrl + item.image" alt="" />
            <span>{{ item.m_name }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
    <div>
      <span style="line-height:23px; font-weight: 400; color: #606266;margin-right: 10px;">{{$t('PaginationLang.common')}}<div style="display:inline-block;margin:0 5px;">{{number_all}}</div>{{$t('PaginationLang.num')}}</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Pagination',
  props: {
    number_all: {
      required: true,
      type: Number
    },
    ButtonArrs: {
      type: Array,
    },
  },
  data(){
    return{
      ButtonArr: [],// 按钮集合
      ButtonArrHide: [],// 隐藏按钮集合
      isMore:false,//是否显示更多按钮
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  watch:{
    
  },
  mounted(){
    window.addEventListener("resize", this.setButtonArr);
    this.$nextTick(() => {
      const resizeObserver = new ResizeObserver(entries => {
        for (let entry of entries) {
          const { width, height } = entry.contentRect;
          this.setButtonArr()
          // 这里可以执行其他响应尺寸变化的逻辑
        }
      });
 
      resizeObserver.observe(this.$refs.pageBox);
    });
    if(this.ButtonArrs){
      this.ButtonArr=JSON.parse(JSON.stringify(this.ButtonArrs))
      this.setButtonArr()
    }
  },
  beforeDestroy(){
      window.removeEventListener("resize");
  },
  methods: {
    setButtonArr(){
      let btnDomArr=document.getElementsByClassName('operateBtnGroup')
      if(btnDomArr.length==0){
          return
      }
      let btnDom=btnDomArr[0]
        let boxWidth=btnDom.clientWidth
        let boxArr=btnDom.children
        let index=0
        for (let i = 0; i < boxArr.length; i++) {
          let elWidth=this.getElementWidth(boxArr[i])
            boxWidth-=elWidth
            if(i>0&&boxWidth<80-10*(i-1)){
              index=i
              btnDom.style.paddingRight='100px'
              this.isMore=true
              break
            }else{
              btnDom.style.paddingRight=0
              this.isMore=false
            }
        }
        this.ButtonArrHide=this.ButtonArr.slice(index)
        if(this.ButtonArrHide.length==0){
          btnDom.style.paddingRight=0
          this.isMore=false
        }
    },
    getElementWidth(element) {
      const style = getComputedStyle(element);
      const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
      const border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
      const margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
      return element.clientWidth + padding + border + margin;
    },
    pushButton(route){
      this.$emit('sendPushButton', route);
    },
  }
}
</script>

<style scoped lang="less">
.pagination-container {
  height: 40px;
  display: flex;
  align-items: center;
  background: #EBEEF3;
  padding: 5px 10px;
  margin-top: 15px;
}
/deep/ .btn-prev, /deep/ .btn-next{
  background-color: #dadada !important;
}
/deep/.el-pagination--small {
  padding: 0;
  display: flex;
    overflow: hidden;
  .el-input__inner{
    height: 22px;
    line-height: 22px;
    border-color: #EBEEF3 !important;
  }
  .el-input__icon{
    line-height: 22px;
  }
  .el-pagination__total{
    margin-left: 10px;
    float: right;
  }
  .el-input{
    width: 60px !important;
    height: 22px !important;
  }
  .el-select .el-input {
    width: 100px !important;
    height: 22px !important;
  }
}
.currentPage{
    line-height: 23px;
    font-weight: 400;
    color: rgb(255, 255, 255);
    background-color: rgb(64, 158, 255);
    display: inline-block;
    min-width: 24px !important;
    text-align: center;
}

</style>
